<template>
  <div class="bill-edit-head">
    <div class="bill-edit-head-box">
      <div 
        @click="setBillType(revenueype)"
        :class="isActive(revenueype) ? 'billtype-button-left active' : 'billtype-button-left'">
        收入
      </div>
      <div 
        @click="setBillType(expenseType)"
        :class="isActive(expenseType) ? 'billtype-button-right active' : 'billtype-button-right'">
        支出
      </div>
    </div>
    <div 
      @click="editClose"
      class="bill-edit-close">
      <van-icon name="cross" />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit } from 'vue-property-decorator';
import { BillModule, BillType } from '../../../store/modules/bill';

@Component({
  name: 'BillEditHeader',
})
export default class extends Vue {
  @Prop({ default: BillType.Expense }) private readonly billType!: BillType;

  private revenueype = BillType.Revenue;
  private expenseType = BillType.Expense;
  private activeType = this.billType;

  private get isActive() {
    return (type: BillType) => {
      return this.activeType === type;
    };
  }

  @Emit('setBillType')
  private setBillType(type: BillType): BillType {
    this.activeType = type;
    return type;
  }

  private editClose() {
    const router = '$router';
    this[router].push({ path: 'bill' });
    BillModule.toggleIsAddBillStatus(false);
    BillModule.toggleIsEditBillStatus(false);
    BillModule.setCurrentEditBill(0);
  }
}
</script>

<style scoped>
.bill-edit-head {
  height: 100%;
  position: relative;
}
.bill-edit-head-box {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
}
.billtype-button-left, .billtype-button-right {
  height: 50px;
  width: 100px;
  font-size: 25px;
  line-height: 50px;
  text-align: center;
  color: #409EFF;
  background-color: white;
  border: 0.1px solid #409EFF;
}
.billtype-button-left {
  border-radius: 20px 0 0 20px;
}
.billtype-button-right {
  border-radius: 0 20px 20px 0;
}
.billtype-button-left.active, .billtype-button-right.active{
  color: white;
  background-color: #409EFF;
}
.bill-edit-close {
  position: absolute;
  font-size: 40px;
  top: 20px;
  right: 30px;
  color: #D0CECF;
}
</style>